<template>
  <div class="mine-wrapper">
    <!-- 用户信息 -->
    <div class="userinfo">
      <div class="img">
        <img src="" alt="" />
      </div>
      <div class="username">用户姓名</div>
      <div class="userpage">
        <router-link to="/info">个人主页 ＞</router-link>
      </div>
    </div>
    <!-- 数据 -->
    <div class="toutiao">
      <div>
        <span>71</span>
        <span class="title">头条</span>
      </div>
      <div>
        <span>708</span>
        <span class="title">获赞</span>
      </div>
      <div>
        <span>169</span>
        <span class="title">粉丝</span>
      </div>
      <div>
        <span>71</span>
        <span class="title">关注</span>
      </div>
    </div>
    <!-- 创作中心 -->
    <div class="chuangzuo">
      <!-- 上div -->
      <div class="top">
        <div class="letf">创作中心</div>
        <div class="right">进入 ＞</div>
      </div>
      <!-- 下div -->
      <div class="buttom">
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">创作首页</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">数据助手</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">收益提现</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">活动广场</div>
        </div>
      </div>
    </div>

    <!-- 更多服务 -->
    <div class="service">
      <div class="header">更多服务</div>
      <div class="body">
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">钱包</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">借钱</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">免流量</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">我的订单</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">购物车</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">优惠券</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">地址管理</div>
        </div>
        <div class="item">
          <div class="icon">┃</div>
          <div class="title">任务</div>
        </div>
      </div>
    </div>

    <!-- 收藏 评论等 -->

    <div class="foot">
      <div class="collect">收藏</div>
      <div class="comment">评论</div>
      <div class="good">点赞</div>
      <div class="history">历史</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.mine-wrapper {
  padding: 10px;
  height: 100vh;
  background-color: #f2f2f2;

  // 底部
  .foot {
    padding: 10px 0;
    background-color: #fff;
    margin-top: 30px;
    display: flex;
    width: 100%;
    height: 40px;
    justify-content: space-around;
    border-bottom: 1px solid @font-grey-99;
    border-radius: 6px;
    .collect {
      height: 30px;
      border-bottom: 2px solid @font-red-f8;
    }
  }

  // 更多服务
  .service {
    margin-top: 20px;
    background-color: #fff;
    border-radius: 6px;
    padding: 10px 0;
    .header {
      padding-left: 20px;
    }
    .body {
      display: flex;
      flex-wrap: wrap;
      .item {
        padding-top: 20px;
        flex: 0 0 24%;
        text-align: center;
        justify-content: space-around;
        .icon {
          padding-bottom: 5px;
        }
      }
    }
  }

  // 创作中心
  .chuangzuo {
    margin-top: 20px;
    background-color: #fff;
    border-radius: 6px;
    .top {
      padding: 10px 0;
      padding-left: 20px;
      display: flex;
      position: relative;
      align-items: center;
      .right {
        position: absolute;
        right: 0;
        font-size: 12px;
        color: #999;
      }
    }
    .buttom {
      padding: 10px 0;
      display: flex;
      text-align: center;
      justify-content: space-around;
    }
  }

  // 头条  获赞 粉丝  关注
  .toutiao {
    border-radius: 6px;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    .title {
      color: #999;
      font-size: 12px;
    }
    div {
      display: flex;
      flex-direction: column;
      text-align: center;
    }
  }

  // 用户信息
  .userinfo {
    margin-top: 20px;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;

    .userpage {
      position: absolute;
      right: 0;
      color: #999;
      font-size: 12px;
      a {
        text-decoration: none;
        color: #999;
      }
    }
    .username {
      margin-left: 10px;
      font-weight: 700;
    }
    .img {
      margin-left: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: orange;
    }
  }
}
</style>